import React, { useEffect, useState } from 'react';
import { Row, Col, Space, Button, Select } from 'antd';
import CommonInput from '@/pages/OrderModule/common/components/CommonInput';
import CommonTextarea from '@/pages/OrderModule/common/components/CommonTextarea';
import { useCityes } from './cities';
import Style from './index.module.less';

const Address = (props) => {
  const {} = props;
  const { cityesOptions } = useCityes();
  const { province, setProvince } = useState();
  const { city, setCity } = useState();

  useEffect(() => {}, [province]);

  return (
    <div className={Style.address_group}>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <CommonInput aria-required placeholder="请输入收件人" />
        </Col>
        <Col span={8}>
          <CommonInput aria-required placeholder="请输入手机号或固话或虚拟号" />
        </Col>
        <Col span={8}>
          <Select className={Style.select} options={cityesOptions} onChange={(value) => setProvince(value)} aria-required placeholder="请选择省" />
        </Col>
        <Col span={8}>
          <Select className={Style.select} aria-required placeholder="请选择市" />
        </Col>
        <Col span={8}>
          <Select className={Style.select} aria-required placeholder="请选择区" />
        </Col>
      </Row>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <CommonTextarea aria-required showCount={true} maxLength={500} placeholder="请输入详细地址" />
        </Col>
        <Col span={8}>
          <CommonTextarea aria-required showCount={true} maxLength={100} placeholder={`地址识别粘贴地址回车后自动识别，例如：张三，15712345678，广东省 广州市 天河区 平安大厦`} />
        </Col>
        <Col span={8}>
          <Button type="primary">保存</Button>
        </Col>
      </Row>
    </div>
  );
};

export default Address;
